<template>
    <div id="apilist">
        <div id="sidebar">
            <router-link to="/_apilist/new" name="new" class="sidebarItem material-icons">
                +
            </router-link>

            <router-link v-for=" (k,v) in apilist" :key="k.id" :to="k.index" :name="k.apiName" class="sidebarItem">
                {{k.apiName}}
            </router-link>
        </div>
        <div id="apiContent">
            <api-detail :apiDetail="childItem">
            </api-detail>
        </div>
    </div>
</template>

<script>
    import apipage from "./apiEdit.vue"
export default {
    name:'applist',
    watch:{
        '$route'(to){
            const id=to.params.id
            if (id=="new"){
                this.childItem=null
                return
            }
            for ( const v of this.apilist){
                if (v.id==id){
                    this.childItem=v
                    return
                }
            }
        }
    },
    components:{
        'api-detail':apipage
    },
    computed:{
        apilist(){return this.$store.state.apilist}
    },
    data(){
        return {
            childItem:null
        }
    }
}
</script>

<style>
    #apilist{
        width:450px;
        margin:0 auto;
    }
    #sidebar{
        text-align:right;
        /* padding-right:10px; */
        margin-right:6px;
        display:block;
        float:left;
        width:20%;
        /* border:solid black 2px */
    }
    #apiContent{
        padding:2px;
        display:block;
        float:left;
        width:75%;
        border:solid #e2e2df 1px;
    }
    .sidebarItem{
        display:block;
        text-align:center;
        margin-top:10px;
        width:100%;
        border-bottom:solid #b9b9b7 1px;
    }
    body{
        background-color:#fdfcf6
    }
</style>
